<template>
  <div class="home">
     <div class="main-head">
          <div class="head-normal">
            <el-menu
            class="el-menu-demo"
            mode="horizontal"
            :router='true'
          >
            <el-menu-item index="/home" ><img src="http://game.gtimg.cn/images/lol/v3/logo-public.png"> </el-menu-item>
            <el-menu-item index="/competition"><div @mouseenter="show" @mouseleave="show">英雄联盟赛事</div></el-menu-item>
            <el-menu-item index="/developer"><div @mouseenter="show" @mouseleave="show">开发者基地</div></el-menu-item>
            <el-menu-item index="/cloud"><div @mouseenter="show" @mouseleave="show">云顶之弈</div></el-menu-item>
            <el-menu-item index="/bar"><div @mouseenter="show" @mouseleave="show">网吧特权</div></el-menu-item>
            <el-menu-item ></el-menu-item>
            <el-menu-item ></el-menu-item>
            <el-menu-item ></el-menu-item>
            <el-menu-item >亲爱的召唤师请登录</el-menu-item>
          </el-menu>
          </div>
          <div class="head-nav-sub" v-show="isshow" @mouseenter="isshow=true" @mouseleave="isshow=false">

          </div>
          <div class="search-hover-wrap"></div>
          </div>
        <div class="head-topact">
          <img src="http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_3ecabeb51b86cc8caddaca4a98458587/0">
        </div>
    <div class="banner clear main">
      <div class="banner-left">
          <template >
              <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in a" :key="item.id" :label="item.text">
                </el-carousel-item>
              </el-carousel>
            </template>
      </div>
      <div class="banner-right">
          <div class='news-title clear'><div v-for="(item,index) in b" @mouseenter='change(index+1)' :key="index" class="news">{{item}}</div></div>
          <el-tabs v-model="activeName" >
              <el-tab-pane :name="index+1" :key="index" v-for="(item,key,index) in zixun">
                      <div class="news-list-title">{{key}}</div>
                      <ul>
                        <li class="gg" v-for="item1 in item" :key="item1.id"><div class="gonggao">{{item1.leixing}}</div><div class="gg-cen">{{item1.text}}</div><div class="gg-time">{{item1.ctime}}</div></li>
                      </ul>
                      <div class=""></div>
              </el-tab-pane>
          </el-tabs>
      </div>
    </div>
    <div class="cen clear main">
      <div class="cen-left">
        <div class="cen-left-title">
          <div class="hot">
            热门活动
          </div>
          <div class='hot-title'>
            <div v-for="(item,index) in d" @mouseenter='change2(index+1)' :key="index" class="hots">{{item}}</div>
          </div>
        </div>
        <div class="cen-left-con">
            <el-tabs v-model="activeName2" >
                <el-tab-pane :name="index+1" :key="index" v-for="(item,key,index) in huodong">
                        <ul class="act">
                          <li class="act-item" v-for='(item1,i) in item' :key="i">
                            <div class="act-item-top"><img :src="item1.pic"></div>
                            <div class="act-item-foot">
                              <p class="act-item-title">{{item1.text}}</p>
                              <div><span class="act-item-time">10天结束</span><span  class="act-item-logo">new</span></div>
                            </div>
                            <div class="act-item-cen">卧槽，赶紧买呀</div>
                          </li>
                        </ul>

                </el-tab-pane>
            </el-tabs>
        </div>
      </div>
      <div class="cen-right">
          <div class="cen-right-top">
            <div class="cen-down">
                <video class="side-down-video" autoplay="" loop="" muted="" width="366" height="168">
                    <source src="http://ossweb-img.qq.com/images/lol/v3/btn-download.mp4" type="video/mp4">
                  </video>
            </div>
            <div>
              <div class="p1"><img src="./1.jpg"></div>
              <div class="p2"><img src="./2.jpg"></div>
            </div>
          </div>
          <div class="cen-right-foot">
            <ul>
              <li><i class="el-icon-headset">在线客服</i></li>
              <li><i class="el-icon-headset">在线客服</i></li>
              <li><i class="el-icon-headset">在线客服</i></li>
              <li><i class="el-icon-headset">在线客服</i></li>
            </ul>
            <ul>
              <li><i class="el-icon-headset">在线客服</i></li>
              <li><i class="el-icon-headset">在线客服</i></li>
              <li><i class="el-icon-headset">在线客服</i></li>
              <li><i class="el-icon-headset">在线客服</i></li>
            </ul>
          </div>
        </div>

    </div>
    <div class="new-champion main">
      <div class="new-champion1"><img src="http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_919a12119f2a0fb5277a62d7cd7a1184/0"></div>
      <div class="new-champion2"><img src="http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_919a12119f2a0fb5277a62d7cd7a1184/0"></div>
      <div class="new-champion3">
        <div class="new-model">
          <div class="new-model1"><img src="http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_08ce6e5ca927bc149331884b92a3f32f/0" alt=""></div>
          <div class="new-model2"><img src="http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_08ce6e5ca927bc149331884b92a3f32f/0" alt=""></div>
        </div>
        <div class="new-model3"></div>
      </div>
    </div>
    <div class="hero main">
      <div class="hero-select">
        <span class="hero-select-title">英雄资料</span>
        <span class="hero-select-leixing" v-for="(item,index) in e" @click="heroSelect(index)" :key="index">{{item}}</span>
      </div>
      <div class="hero-list">
        <ul>
          <li v-for='item in list1' :key='item.id'>
            <img :src="item.pic">
            <p>{{item.name}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    a: [
      { id: 1, text: '恭喜FPX勇夺S9冠军' },
      { id: 2, text: '真实伤害盛大登场' },
      { id: 3, text: '第五系列小小英雄' },
      { id: 4, text: '元素崛起' }
    ],
    isshow: false,
    activeName: 1,
    activeName2: 1,
    b: ['综合', '赛事', '公告', '攻略', '社区'],
    c: [
      { id: 1, title: '综合', cen: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷' },
      { id: 2, title: '赛事', cen: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷' },
      { id: 3, title: '公告', cen: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷' },
      { id: 4, title: '攻略', cen: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷' },
      { id: 5, title: '社区', cen: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷' }
    ],
    d: ['正在进行', '商城特惠', '长期活动'],
    huodong: {
      e: [
        {
          id: '1',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        },
        {
          id: '2',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        },
        {
          id: '3',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        },
        {
          id: '4',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        }
      ],
      f: [
        {
          id: '1',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1573389217_uploadnewsImg.jpg',
          text: '真实伤害盛大登场'
        },
        {
          id: '2',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1573389217_uploadnewsImg.jpg',
          text: '真实伤害盛大登场'
        },
        {
          id: '3',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1573389217_uploadnewsImg.jpg',
          text: '真实伤害盛大登场'
        },
        {
          id: '4',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1573389217_uploadnewsImg.jpg',
          text: '真实伤害盛大登场'
        }
      ],
      g: [
        {
          id: '1',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        },
        {
          id: '2',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        },
        {
          id: '3',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        },
        {
          id: '4',
          pic: 'http://ossweb-img.qq.com/images/clientpop/act/lol_1571884210_uploadnewsImg.jpg',
          text: '十周年最强福利'
        }
      ]
    },
    zixun: {
      '1.9.22云顶之弈更新：元素崛起震荡云顶': [
        {
          id: 1,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-11'
        },
        {
          id: 2,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-00'
        },
        {
          id: 3,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-37'
        },
        {
          id: 4,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-8'
        },
        {
          id: 5,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-9'
        }
      ],
      '2.凤舞九州 名扬天下！FPX冠军庆典活动正式开启': [
        {
          id: 1,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-11'
        },
        {
          id: 2,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-00'
        },
        {
          id: 3,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-37'
        },
        {
          id: 4,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-8'
        },
        {
          id: 5,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-9'
        }
      ],
      '3.9.22云顶之弈更新：元素崛起震荡云顶': [
        {
          id: 1,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '赛事',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-11'
        },
        {
          id: 2,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-00'
        },
        {
          id: 3,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-37'
        },
        {
          id: 4,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-8'
        },
        {
          id: 5,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-9'
        }
      ],
      '4.凤舞九州 名扬天下！FPX冠军庆典活动正式开启': [
        {
          id: 1,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-11'
        },
        {
          id: 2,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-00'
        },
        {
          id: 3,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-37'
        },
        {
          id: 4,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-8'
        },
        {
          id: 5,
          title: '凤舞九州 名扬天下！FPX冠军庆典活动正式开启',
          leixing: '赛事',
          text: '9.恭喜FPX勇夺2019全球总决赛冠军！',
          ctime: '11-9'
        }
      ],
      '22云顶之弈更新：元素崛起震荡云顶': [
        {
          id: 1,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-11'
        },
        {
          id: 2,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-00'
        },
        {
          id: 3,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-37'
        },
        {
          id: 4,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-8'
        },
        {
          id: 5,
          title: '9.22云顶之弈更新：元素崛起震荡云顶',
          leixing: '公告',
          text: '9.22版本更新公告：赛娜携真实伤害皮肤降临峡谷',
          ctime: '11-9'
        }
      ]
    },
    heros: [
      {
        id: 1,
        name: '黑暗之女',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/Annie.png',
        leixing: '1'
      },
      {
        id: 2,
        name: '提伯斯',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/Annie.png',
        leixing: '2'
      },
      {
        id: 3,
        name: '安妮',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/TwistedFate.png',
        leixing: '3'
      },
      {
        id: 4,
        name: '哈哈哈',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/Annie.png',
        leixing: '4'
      },
      {
        id: 5,
        name: '哈哈哈1',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/Annie.png',
        leixing: '5'
      },
      {
        id: 6,
        name: '黑暗之女1',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/Annie.png',
        leixing: '1'
      },
      {
        id: 7,
        name: '提伯斯1',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/TwistedFate.png',
        leixing: '2'
      },
      {
        id: 8,
        name: '安妮1',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/Annie.png',
        leixing: '3'
      },
      {
        id: 9,
        name: '哈哈哈2',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/Annie.png',
        leixing: '4'
      },
      {
        id: 10,
        name: '哈哈哈3',
        pic: 'http://ossweb-img.qq.com/images/lol/img/champion/TwistedFate.png',
        leixing: '5'
      }
    ],
    e: ['所有英雄', '法师', '战士', '刺客', '远程', '辅助'],
    f: 0
  }),
  created () {},
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    change (index) {
      this.activeName = index
      console.log(this.activeName)
    },
    change2 (index) {
      this.activeName2 = index
      console.log(this.activeName)
    },
    show () {
      this.isshow = !this.isshow
      console.log(this.isshow)
    },
    heroSelect (index) {
      this.f = index
    }
  },
  computed: {
    list1 () {
      let arr = []
      for (let i = 0; i < this.heros.length; i++) {
        if (this.heros[i].leixing.search(this.f) !== -1) {
          arr.push(this.heros[i])
        }
      }
      if (arr[0] === undefined) {
        arr = this.heros
      }
      console.log(arr)
      return arr
    }
  }
}
</script>
<style lang="less" scope>
    *{
      margin: 0px;
      padding: 0px;
    }
    li{
      list-style: none;
    }
    .main{
      width:1350px;margin:0px auto
      }
    .clear:after{content : "";display : block;clear : both;
    }
    body{
      background-color: #eee;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }
    .el-carousel__container{
      height: 340px!important;
      width:820px;
    }
  .el-carousel__button{
    height: 100%!important;
    width:100%!important;
  }
    .el-carousel{
      width:820px;
    }
    .el-carousel__item:nth-child(3) {
      background: no-repeat;
      background-image: url("http://ossweb-img.qq.com/upload/adw/image/20191110/8e97a0ad32be0c6272b27b3b03ccd305.jpeg");
      background-size:contain;
    }
    .el-carousel__item:nth-child(5) {
      background: no-repeat;
      /* 小小英雄 1*/
      background-image: url("http://ossweb-img.qq.com/upload/adw/image/20191111/0d8dab6fb678c0826e271e29c87f94e5.jpeg");
      background-size:contain;

    }
    .el-carousel__item:nth-child(4) {
      background: no-repeat;
      /* 真实伤害3 */
      background-image: url("http://ossweb-img.qq.com/upload/adw/image/20191110/435fed2a4f8874cdd8755a102a2b96c5.jpeg");
      background-size:contain;
    }
    .el-carousel__item:nth-child(6) {
      background: no-repeat;
      /* 云顶之弈2 */
      background-image: url("http://ossweb-img.qq.com/upload/adw/image/20191112/8b7d28f40294ba09c8135cdd7cd213dc.jpeg");
      background-size:contain;
    }
    .el-carousel__indicators--labels .el-carousel__indicator{
      padding: 0px 0px!important;
    }
    .el-carousel__indicator--horizontal {
      width: 25%;
      display: inline-block;

      height: 30px;
    }
    .el-carousel__button {

      display: block;
      opacity: .48;
      background-color: #FFF;
      border: none;
      outline: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      -webkit-transition: .3s;
      transition: .3s;
    }
    .el-carousel__indicators--labels .el-carousel__button{
      padding: 0px;
      width: 100%;
      height: 30px;
      /* box-sizing:border-box; */
    }
    ul .is-active{
      z-index: 10000;
      height: 30px;
      border-bottom: 1px solid #cca45a !important;
      box-sizing:border-box;
    }
    .main-head{
    position: absolute;
    height: 78px;
    top:0px;
    left:0px;
    overflow:visible;
    width: 100%;}
    .head-normal .el-menu-item{
        z-index:100;
        padding: 0 40px;
      }
      .head-normal .el-menu-item：hover{
        background-color: rgba(0, 0, 0, 0.3);
      }
      .head-nav-sub{
      position: absolute;
      width:1500px;
      height:360px;
      left: 0px;
      top: 0px;
      z-index: 10;
      background-color: rgba(0,0,0,0.3);
    }
    .head-topact{
    width: 100%;
    height: 360px;
    margin-bottom: 30px;
    overflow: hidden;
  }
  .head-topact img{
    height: 100%;
    width: 1900px;
    position: relative;
    left: -250px;

  }
  .banner{
    padding: 0px 30px;
    width: 1350px;
    margin-bottom: 50px;
  }
  .banner-left{
      float: left;
  }
     .banner-left .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }
    .banner-right{
      float:left;
      width:500px;
      height:38px;
      margin-left:30px;
    }
    .banner-right .el-tabs__nav-wrap {
      display: none;
    }
    .el-tabs__nav-wrap {
      display: none;
    }
    .news{
      width:40px;
      height:37px;
      color:#676767;
    }
    .news:hover{
      color:#1da6ba;
      font-weight: bolder;
    }
    .news-list-title{
      border-bottom:1px solid #e0e2e2 ;
      border-top:1px solid #e0e2e2;
      height: 58px;
      line-height: 58px;
      text-align: center;
    }
    .news-title{
      display: flex;
      width:500px;
      justify-content: space-between;
    }
    .gg{
      height: 39px;
      line-height: 39px;
      font-size: 12px;
      border-bottom: 1px solid #e0e2e2;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .gonggao{
      height: 18px;
      line-height: 18px;
      text-align: center;
      width: 34px;
      color: #e9852d;
      border: 1px solid #e9852d;
    }
    .gg-time{
      color:#9da7bd;
    }
    .news-list-title{
      font-size:22px;
      color:#1da6ba;
      font-weight: bolder;
    }
    .cen-left{
      height: 332px;
      width: 811px;
      float: left;
    }
    .act-item{
      height: 275px;
      width: 191px;
    }
    .hot{
      font-size: 24px;
      font-weight: bold;
    }
    .hot-title{
      display: flex;
      font-size: 14px;
      color: #676767;
    }
    .hots{
      width: 70px;
      text-align: center;
      border-bottom:1px solid #676767;
    }
    .hots:hover{
      color: #1da6c5;
      border-bottom:1px solid #1da6c5;
    }
    .cen-left-title{
      display: flex;
    }
    .cen{
      padding: 0px 30px;
      background-color: #eee;
    }
    .act-item{
      position: relative;
    }
    .act-item-top{
      height: 205px;
      width: 191px;

    }
    .act-item-top img{
      height: 100%;
      width: 100%;
    }
    .act-item-cen{
      height: 205px;
      width: 191px;
      position: absolute;
      left: 0px;
      top:0px;
      background-color: rgba(0,0,0,0.6);
      opacity: 0;
      text-align: center;

    }
    .act-item:hover .act-item-cen{
      opacity: 1;
      color: white;
    }
    .act-item-foot{
      padding: 8px;
      font-size: 11px;
      color: #1da6ba;
    }
    .act{
      display: flex;
      justify-content: space-between;
    }
    .act-item-title{
      margin-bottom: 28px;
      color: #424242;
      font-size: 12px;
    }
    .act-item-logo{
      background-color: #cca45a;
      color: white;
      float: right;
      height: 14px;
      width: 28px;
      line-height: 13px;
      text-align: center;
    }
    .cen-right{
      height: 332px;
      width: 500px;
      float: left;
      margin-left: 30px;
    }
    .cen-right-foot ul{
      display: flex;
      justify-content: space-between;
      margin-top: 13px;
    }
    .cen-right-foot li{
      width: 111px;
      height: 67px;
      background-color: white;
      font-size: 12px;
      text-align: center;
      line-height: 67px;
    }
    .cen-right-top{
      display: flex;
      justify-content: space-between;
    }
    .p1{
      height:75px;
      width:116px;
      margin-bottom: 18px;
    }
    .p1 img{
      height: 100%;
      width: 100%;
    }
    .p2{
      height:75px;
      width:116px;
    }
    .p2 img{
      height: 100%;
      width: 100%;
    }
    .new-champion1 img{
      height: 100%;
    }
    .new-champion2 img{
      height: 100%;
    }
    .new-champion div{
      height: 251px;
      width: 398px;
    }
    .new-champion{
      display: flex;
      justify-content:space-between;
      margin-top: 42px;
      margin-bottom: 81px;
    }
    .new-champion3{
      display: flex;
      justify-content: space-between;
      width: 500px!important;
    }
    .new-model{
      width: 238px!important;
    }
    .new-model1{
      width: 238px;
      height: 118px!important;
      margin-bottom: 15px;
    }
    .new-model2{
      width: 238px;
      height: 118px!important;

    }
    .new-model3{
      width: 239px!important;
      height: 252px!important;
      margin-left: 16px;
      background-color: gray;
    }
    .act-item{
      background-color: white;
    }
    .hero{
      height: 494px;
      padding: 66px 0px;

    }
    .hero-select{
      color: #676767;
      font-size: 10px;
      margin-bottom: 30px;
      text-align: left;
    }
    .hero-select-title{
      font-size: 22px;
    }
    .hero-list li{
      height: 100px;
      width: 90px;
      text-align: center;
    }
    .hero-list ul{
      display: flex;
    }
    .hero-list li img{
      width: 65px;
      height: 65px;
    }
    .hero-list li p{
      font-size: 10px;
      text-align: center;
    }
    .hero-select-leixing{
      padding-left: 28px;
      margin-right: 40px;
    }
</style>
